/*-------KONSTANT TABLE STYLE--------*/

.TableRight,
.textRight,
.righttext {
    text-align: right;
}

.TableCenter,
.textCenter,
.centertext {
    text-align: center;
}

.TableLeft,
.textLeft,
.lefttext {
    text-align: left;
}

table,
table th,
table td {
    border-collapse: collapse;
}

.TopBorder1pxBlackTd td {
    border-top: 1px solid black;
}

/*-------NORMAL TABLE--------*/
table[table-type="myTable"] th {
    padding-left: 4px;
    padding-right: 4px;
    text-align: left;
}

table[table-type="myTable"] td {
    padding-left: 5px;
    padding-right: 5px;
}
table[table-type="myTable"] select{
    width: 100%;
    padding: 2px;
    margin: 2px;
}


/*-------SPELAR LISTA TABLE--------*/

table[table-type="table_1"] {
    border-collapse: collapse;
}

table[table-type="table_1"] th {
    background-color: rgb(153, 153, 153);
    border-bottom: 1px solid black;
}

table[table-type="table_1"] tr:nth-child(odd) {
    background-color: rgb(221, 221, 221);
}

table[table-type="table_1"] tr:nth-child(even) {
    background-color: rgb(204, 204, 204);
}

table[table-type="table_1"] th,
table[table-type="table_1"] td {
    padding: 4px;
}

table[table-type="table_1"] td[contenteditable]:active,
table[table-type="table_1"] td[contenteditable]::after,
table[table-type="table_1"] td[contenteditable]:hover,
table[table-type="table_1"] td[contenteditable]:focus {
    background-color: rgb(164, 164, 164);
}

table[table-type="table_1"] input[type="checkbox"] {
    width: 20px;
    Height: 20px;
    cursor: pointer;
}

table[table-type="table_1"] {
    border: 1px solid black;
    text-align: left;
}

/*--------------------------FORM---------------------------------------*/

table[table-header-type="sticky"] {
    position: relative;
    z-index: 2;
}

table[table-header-type="sticky"] th {
    position: sticky;
    position: -webkit-sticky;
    top: 40px;

}

/*--------------------------FORM---------------------------------------*/

table[version="nya-match"], table[version="nya-match"] th, table[version="nya-match"] td{
    border-collapse: collapse;
}
table[version="nya-match"]{

    border: 2px solid rgb(132, 132, 132);
    text-align: left;
    padding: 10px;
}
table[version="nya-match"] th:nth-of-type(1){
    padding-left: 5px;
}
table[version="nya-match"] th{
    margin-right: 15px;
    text-align: left;
    padding: 5px;
    background-color: rgb(57, 57, 57);
    color: white;
}
table[version="nya-match"] td{
    margin-right: 15px;
    text-align: left;
    padding: 2px;
    background-color: rgb(220, 220, 220);
    color: rgb(0, 0, 0);
}
table[version="nya-match"] td input{
    padding-top: 5px;
    padding-bottom: 5px;
    width: 120px;
    height: 30px;
}
/*--------------------------ÖVRIG TILSÄTT TABLE---------------------------------------*/

.sticky_head {
    position: sticky;
    position: -webkit-sticky;
    top: 60px;
    z-index: 1;
    height: 40px;
}

/*--------------------------DOMARE KLASSNING TABLE---------------------------------------*/


table[version="klassning"] {
    border: 1px solid black;
    background-color: rgb(234, 234, 234);

}

table[version="klassning"] tr {
    border-bottom: 1px solid rgb(189, 189, 189);
}


table[version="klassning"] td {
    border-right: 1px solid rgb(189, 189, 189);

}

table[version="klassning"] tr:last-of-type {
    border-bottom: 1px solid rgb(0, 0, 0);
}

table[version="klassning"] input {
    border: none;
    padding: 2px;
    border-radius: 0;
    white-space: nowrap;
    background-color: rgb(234, 234, 234);

}

table[version="klassning"] input:active,
table[version="klassning"] input:focus {
    border: none;
    background-color: rgba(0, 0, 0, 0.2);
}

table[version="klassning"] input:hover {
    background-color: rgb(157, 157, 157, 0.2);
}

table[version="klassning"] tr:nth-child(odd),
table[version="klassning"] tr:nth-child(odd) td,
table[version="klassning"] tr:nth-child(odd) input {
    background-color: rgb(193, 193, 193);
}

table[version="klassning"] tr:nth-child(even),
table[version="klassning"] tr:nth-child(even) td,
table[version="klassning"] tr:nth-child(even) input {
    background-color: rgb(216, 216, 216);
}


table[version="klassning"][domare-tabell] tr th{
    position: sticky;
    top: 134px;
    z-index: 2;
}


/*--------------------------TILSÄTT TABLE---------------------------------------*/

table[table-type="tillsatt-table"],
table[table-type="tillsatt-table"] th,
table[table-type="tillsatt-table"] td {
    border: none;
    white-space: nowrap;
    /* Nolinebreak */
    text-align: left;
}

table[table-type="tillsatt-table"] select {
    white-space: nowrap;
}

table[table-type="tillsatt-table"] tr:nth-child(odd) td {
    background-color: rgb(202, 202, 202);
}


table[table-type="tillsatt-table"] th {
    padding: 5px;
    background-color: rgb(57, 57, 57);
    color: white;

}

table[table-type="tillsatt-table"] td {
    background-color: rgb(220, 220, 220);
    color: rgb(0, 0, 0);
    font-size: 14px;
    padding: 4px;
}

table[table-type="tillsatt-table"] input {
    outline: none;
    border: none;
    background-color: rgba(0, 0, 0, 0.1);

    border-radius: 3px;
}

table[table-type="tillsatt-table"] input:hover {
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
/*--------------------------TILSÄTT PLAIN---------------------------------------*/

table[table-type="plain"],
table[table-type="plain"] th,
table[table-type="plain"] td {
    border: none;
    white-space: nowrap;
    /* Nolinebreak */
    text-align: left;
}

table[table-type="plain"] select {
    white-space: nowrap;
}

table[table-type="plain"] tr:nth-child(odd) td {
    background-color: rgb(202, 202, 202);
}


table[table-type="plain"] th {
    padding: 5px;
    background-color: rgb(57, 57, 57);
    color: white;

}

table[table-type="plain"] td {
    background-color: rgb(220, 220, 220);
    color: rgb(0, 0, 0);
    font-size: 14px;
    padding: 4px;
}

table[table-type="plain"] input {
    outline: none;
    border: none;
    background-color: rgba(0, 0, 0, 0.1);

    border-radius: 3px;
}

table[table-type="plain"] input:hover {
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/*--------------------------MINI TABLE---------------------------------------*/


table[table-type="table_vertical"] {
    border-collapse: collapse;
    border: 1px solid black;
    text-align: left;
}

table[table-type="table_vertical"] tr {
    border-bottom: 1px solid rgb(114, 114, 114);
}

table[table-type="table_vertical"] tr:last-of-type {
    border-bottom: 1px solid black;
}

table[table-type="table_vertical"] th {
    background-color: rgb(153, 153, 153);
}

table[table-type="table_vertical"] tr:nth-child(odd) {
    background-color: rgb(221, 221, 221);
}

table[table-type="table_vertical"] tr:nth-child(even) {
    background-color: rgb(204, 204, 204);
}

table[table-type="table_vertical"] th,
table[table-type="table_vertical"] td {
    padding: 4px;
}

table[table-type="table_vertical"] td[contenteditable]:active,
table[table-type="table_vertical"] td[contenteditable]::after,
table[table-type="table_vertical"] td[contenteditable]:hover,
table[table-type="table_vertical"] td[contenteditable]:focus {
    background-color: rgb(164, 164, 164);
}

table[table-type="table_vertical"] input[type="checkbox"] {
    width: 20px;
    Height: 20px;
    cursor: pointer;
}



/*--------------------------DOMARE FIL STILAR---------------------------------------*/

table[version="special_color_table"]{
    border-collapse: collapse;
    border: 1px solid black;
}

table[version="special_color_table"] th{
    background-color: rgb(126, 126, 126);
    border: 1px solid rgb(225, 225, 225);
}
table[version="special_color_table"] td{
    background-color: rgb(201, 201, 201);
    border: 1px solid rgb(225, 225, 225);
}
table[version="special_color_table"] input, table[version="special_color_table"] select{
    padding: 2px;
    cursor: pointer;
}

table[version="special_color_table"] input{
    background-color: rgb(212, 212, 212);
    border: none;
    width: 110px;
}

table[version="special_color_table"] input:hover,table[version="special_color_table"] input:active, table[version="special_color_table"] input:focus{
    background-color: rgb(157, 157, 157);
    border: none;
}

table[version="special_color_table"] .blockItem{
    height: 25px;
    color:rgb(201, 201, 201) ;
    background-color: rgb(201, 201, 201);
}

input[name="AvailableChoice"], label[cursor="pointer"]{
    cursor: pointer;
}

/*--------------------------2---------------------------------------*/
table[version="visa-matcher"]{
    text-align: left;
    width: 100%;
    height: 100%;
}



table[version="visa-matcher"] .match-main-container{
    width: fit-content;
    padding: 5px;
    margin-bottom: 10px;
}

.match-visning-container{
    width: 250px;
}

table[version="visa-matcher"] td{
    margin: 0;
}
table[version="visa-matcher"] td > .match-visning-container {
    align-self: flex-start;
}
/*--------------------------3---------------------------------------*/

table[version="speltyp_table"]{
    border-collapse: collapse;
    border: 1px solid black;

}

table[version="speltyp_table"] th{
    border-bottom: 1px solid black;
    background-color: rgb(146, 146, 146);
    padding-left: 5px;
    padding-right: 5px;
}

table[version="speltyp_table"] th:nth-child(odd) {
    background-color: rgb(167, 167, 167);
}

table[version="speltyp_table"] td{
    background-color: rgb(191, 190, 190);
    padding-left: 5px;
    padding-right: 5px;

}


/*--------------------------4---------------------------------------*/


table[version="nya-domare"]{
    border: 1px solid black;
    background-color: rgb(234, 234, 234);
    padding: 4px;
    border-collapse: collapse;
}

table[version="nya-domare"] input{
    border: none;
    border-radius: 0;
   /* white-space: nowrap; */
    background-color: rgb(234, 234, 234);

}



table[version="nya-domare"] tr{
    border-bottom: 1px solid rgb(215, 215, 215);
}
table[version="nya-domare"] tr:hover{
    border-bottom: 1px solid rgb(190, 190, 190);
}
table[version="nya-domare"] tr:last-of-type{
    border-bottom: 1px solid rgb(0, 0, 0);
}
table[version="nya-domare"] td{
    min-width: 100px ;
}
table[version="nya-domare"] td:nth-of-type(2),table[version="nya-domare"] td:nth-of-type(4){
    min-width: 200px ;
}

table[version="nya-domare"] td:nth-of-type(1), table[version="nya-domare"] td:nth-of-type(5){
    min-width: 40px ;
}

table[version="nya-domare"] td input{
    width: 100%;
}


table[version="nya-domare"] td{
    width: fit-content;
}

table[version="nya-domare"] th, table[version="nya-domare"] td{
    padding: 2px;
}

table[version="nya-domare"] input:active, table[version="nya-domare"] input:focus{

    background-color: rgba(0, 0, 0, 0.2);
}

table[version="nya-domare"] input:hover{
    background-color: rgb(157, 157, 157, 0.2);
}
/*--------------------------5---------------------------------------*/
table[version="ersattning-table"]{
    border: 1px solid black;
    background-color: rgb(234, 234, 234);
    border-collapse: collapse;
}

table[version="ersattning-table"] th{
    background-color: rgb(219, 219, 219);
}

table[version="ersattning-table"] td{
    border-bottom: 1px solid rgb(189, 189, 189);
}

table[version="ersattning-table"] tr:last-of-type td{
    border-bottom: 1px solid rgb(0, 0, 0);
}

table[version="ersattning-table"] input, table[version="ersattning-table"] td, table[version="ersattning-table"] th{
    white-space: nowrap;
    width: fit-content;
    padding: 2px;
    margin: 2px;
}

table[version="ersattning-table"] td span{
    padding-right: 5px;
}

table[version="ersattning-table"] input{
    border: none;
    padding: 2px;
    border-radius: 0;
    background-color: rgb(234, 234, 234);

}

table[version="ersattning-table"] input:active, table[version="ersattning-table"] input:focus{
    border: none;
    background-color: rgba(0, 0, 0, 0.2);
}

table[version="ersattning-table"] input:hover{
    background-color: rgb(157, 157, 157, 0.2);
}


/*--------------------------6---------------------------------------*/
table[version="klassning-table"]{
    border: 1px solid black;
    background-color: rgb(234, 234, 234);
    border-collapse: collapse;
}

table[version="klassning-table"] th{
    background-color: rgb(219, 219, 219);
}

table[version="klassning-table"] td{
    border-bottom: 1px solid rgb(189, 189, 189);
}

table[version="klassning-table"] tr:last-of-type td{
    border-bottom: 1px solid rgb(0, 0, 0);
}

table[version="klassning-table"] input, table[version="klassning-table"] td, table[version="klassning-table"] th{
    white-space: nowrap;
    width: fit-content;
    padding: 2px;
    margin: 2px;
}

table[version="klassning-table"] td span{
    padding-right: 5px;
}

table[version="klassning-table"] input{
    border: none;
    padding: 2px;
    border-radius: 0;
    background-color: rgb(234, 234, 234);

}

table[version="klassning-table"] input:active, table[version="klassning-table"] input:focus{
    border: none;
    background-color: rgba(0, 0, 0, 0.2);
}

table[version="klassning-table"] input:hover{
    background-color: rgb(157, 157, 157, 0.2);
}
/*--------------------------7---------------------------------------*/

table[choice_table] td{
    width: fit-content;
}

table[choice_table] td:nth-child(1){
    text-align: center;
}




table[choice_table] td input[type="radio"]{
    width: 15px;
}
table[choice_table] td input[type="radio"], table[choice_table] td label{
    cursor: pointer;
}
table[choice_table] td{
    border-left: 1px solid black;
    padding: 4px;
}
table[choice_table] td input[type="number"]{
    width: 40px;
    padding: 4px;
}
table select[time_item = "start"], table select[time_item = "end"]{
    width: 80px;
}
/*--------------------------7---------------------------------------*/
table[version="ledighet-table"]{
    border: 1px solid black;
    background-color: rgb(234, 234, 234);
    border-collapse: collapse;
}

table[version="ledighet-table"] th{
    background-color: rgb(176, 176, 176);
    padding: 10px !important;
    text-align: left;

}

table[version="ledighet-table"] td{
    border-bottom: 1px solid rgb(189, 189, 189);
}


table[version="ledighet-table"] tr:nth-child(even) td{
    background-color: rgb(213, 213, 213);
}
table[version="ledighet-table"] tr:nth-child(odd) td{
    background-color: rgb(234, 234, 234);
}

table[version="ledighet-table"] tr:last-of-type td{
    border-bottom: 1px solid rgb(0, 0, 0);
}

table[version="ledighet-table"] input, table[version="ledighet-table"] td, table[version="ledighet-table"] th{
    white-space: nowrap;
    width: fit-content;
    padding: 2px;
    margin: 2px;
}

table[version="ledighet-table"] td span{
    padding-right: 5px;
}

table[version="ledighet-table"] input{
    border: none;
    padding: 2px;
    border-radius: 0;
    background-color: rgb(234, 234, 234);

}

table[version="ledighet-table"] input:active, table[version="ledighet-table"] input:focus{
    border: none;
    background-color: rgba(0, 0, 0, 0.2);
}

table[version="ledighet-table"] input:hover{
    background-color: rgb(157, 157, 157, 0.2);
}

/*--------------------------7---------------------------------------*/
table[version="stats-table"]{
    border: 1px solid black;
    background-color: rgb(234, 234, 234);
    border-collapse: collapse;
}

table[version="stats-table"] th{
    background-color: rgb(176, 176, 176);
    padding: 10px !important;
    text-align: left;

}

table[version="stats-table"] td{
    border-bottom: 1px solid rgb(189, 189, 189);
}

table[version="stats-table"] tr:nth-child(even) td{
    background-color: rgb(213, 213, 213);
}
table[version="stats-table"] tr:nth-child(odd) td{
    background-color: rgb(234, 234, 234);
}

table[version="stats-table"] tr:last-of-type td{
    border-bottom: 1px solid rgb(0, 0, 0);
}

table[version="stats-table"] td, table[version="stats-table"] th{
    white-space: nowrap;
    width: fit-content;
    padding: 2px;
    margin: 2px;
}
/*--------------------------7---------------------------------------*/
table[version="domare-andring-table"]{
    border: 1px solid black;
    background-color: rgb(234, 234, 234);
    border-collapse: collapse;
}

table[version="domare-andring-table"] th{
    background-color: rgb(176, 176, 176);
    text-align: left;

}

table[version="domare-andring-table"] td{
    border-bottom: 1px solid rgb(189, 189, 189);
}

table[version="domare-andring-table"] tr:nth-child(even) td{
    background-color: rgb(213, 213, 213);
}
table[version="domare-andring-table"] tr:nth-child(odd) td{
    background-color: rgb(234, 234, 234);
}

table[version="domare-andring-table"] tr:last-of-type td{
    border-bottom: 1px solid rgb(0, 0, 0);
}

table[version="domare-andring-table"] td, table[version="domare-andring-table"] th{
    white-space: nowrap;
    width: fit-content;
    padding: 4px;
    margin: 2px;
}

table[version="domare-andring-table"] td input[type="checkbox"]{
    width: 20px;
    height: 20px;
}

table[version="domare-andring-table"] td button[version="add-button"]{
    width: 100% !important;
    text-align: left;
}
/*-------------------------- TABLE UTAN STIL---------------------------------------*/
table[version="no-style"]{
    background-color: none;
    border: none;
}
/*--------------------------EXTRA TABLE STYLES---------------------------------------*/

div[table-setting="scroll"] {
    overflow-y: scroll;
    height: 200px;
    width: fit-content;
    border: 2px solid black;
}

div[table-setting="scroll"] table th {
    position: sticky;
    position: -webkit-sticky;
    top: -2px;
    border-bottom: 2px solid black;
}


.StatsTable td{
    height: 100%;
}

.StatsTable tr.Darker3{
    background: rgb(220, 220, 220);
}
/*---- LEDIGHET STUFF -----*/

.greenSquare, .orangeSquare, .redSquare{
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    margin-right: 4px;
}
.greenSquare{
    background-color: green;
}
.orangeSquare{
    background-color: orange;
}
.redSquare{
    background-color: red;
}
.greenSquare:hover, .greenSquare:active, .greenSquare:focus{
    background-color: rgb(0, 87, 0);
}
.orangeSquare:hover, .orangeSquare:active, .orangeSquare:focus{
    background-color: rgb(205, 134, 3);
}
.redSquare:hover, .redSquare:active, .redSquare:focus{
    background-color: rgb(171, 2, 2);
}

.Ledighet_icon_contain{
    display: flex;
}


/* tooltip  */
div[square]{
    position: relative;
    display: inline-block;
}

/* .tooltip .tooltiptext  */
div[square] div[content]{
    visibility: hidden;
    position: absolute;

    background-color: #2a2a2a;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 6px;
    z-index: 100;
    opacity: 0;
    transition: opacity 1s;

    bottom: 20px;

    width: 250px;
    height: fit-content;
}


/* .tooltip:hover .tooltiptext */
div[square]:hover div[content] {
    visibility: visible;
    opacity: 1;
}
div[square] div[content]:hover {
    visibility: hidden;
    transition: opacity 1s;
    opacity: 0;
}

div[square]:hover{
    cursor: pointer;
}


/*---- PROBLEM STUFF -----*/
td[problem_td], td[problem_td] div{
    width: fit-content;
}

div[rectangle] {

    background-color: red;
    border-radius: 4px ;
    padding: 4px;
    font-size: auto;
    color: white;
    width: 100%;
    margin: 2px;
}

div[rectangle]:hover{
    cursor: pointer;
    background-color: rgb(174, 0, 0);
}

div[rectangle] div[ProblemContent]{
    visibility: hidden;
    position: absolute;

    background-color: #2a2a2a;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 6px;
    z-index: 100;
    opacity: 0;
    transition: opacity 1s;

    left: 20px;
    top: 350px;
    width: 330px;

}

div[rectangle] div[ProblemContent] div[ProblemScroll] {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 300px;
    padding: 2px;
    width: 100%;
    cursor: default;
}
div[rectangle] div[ProblemContent] div[rectangle_container] {
    width: 100%;
    text-align: right;
    padding-bottom: 10px;
    border-bottom: 2px solid white;
}
div[rectangle] div[ProblemContent] div[rectangle_container] button{
    background-color: rgb(211, 211, 211);
    border-radius: 4px;
}
div[rectangle] div[ProblemContent] div[rectangle_container] button:hover{
    background-color: rgb(187, 38, 38);
    color: rgb(255, 255, 255);
}

div[rectangle] div[ProblemContent] div[rectangle_container] button span{
    font-size: 15px;
}

div[rectangle]:hover{
    cursor: pointer;
}

div[ProblemContent] hr[custom_hr_gray]{
    margin-top: 5px;
    margin-bottom: 5px;
    border: none;
    border-top: 3px solid rgb(133, 133, 133);
    cursor: default;
}
div[ProblemContent] div[rectangle_container] button[close_id],
div[ProblemContent] div[rectangle_container] span[close_id]
{
    cursor: pointer;
}

div[ProblemContent] div[match_problem_container], div[ProblemContent] div[rectangle_container]{
    cursor: default;
}

div[ProblemContent] div[match_problem_container]  div[matchInfo],
div[ProblemContent] div[match_problem_container]  div[match_prev],
div[ProblemContent] div[match_problem_container]  div[match_curr],
div[ProblemContent] div[match_problem_container]  div[anledning]
{
    padding: 10px;
}


div[problemHeaderText]{
    padding: 5px;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100% !important;
    cursor: default;
}

/*------- close ----------*/