.OK {
    background-color: #d4edc9 !important;
}

/* .OK-1 {
    background: linear-gradient(to top, #fff 50%, #d4edc9 50%);
}

.OK-2 {
    background: linear-gradient(to bottom, #fff 50%, #d4edc9 50%);
} */

.TRY {
    background-color: #ffe3e3 !important;
}

/* .TRY-1 {
    background: linear-gradient(to top, #fff 50%, #ffe3e3 50%);
}

.TRY-2 {
    background: linear-gradient(to bottom, #fff 50%, #ffe3e3 50%);
}

.TRY-OK {
    background: linear-gradient(to top, #d4edc9 50%, #ffe3e3 50%);
}

.OK-TRY {
    background: linear-gradient(to bottom, #d4edc9 50%, #ffe3e3 50%);
} */

    .main-table-wrapper {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
        max-width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .btn-group {
        position: relative;
        display: -webkit-inline-flex;
        display: inline-flex;
        vertical-align: middle;
    }
    
    
    .btn {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        padding: .375rem .75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: .25rem;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    
    .btn.dropdown-toggle, .btn:not(:disabled):not(.disabled).active, .btn:not(:disabled):not(.disabled):active {
        color: #fff;
        background-color: #545b62;
        border-color: #4e555b;
    }
    
    [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
        cursor: pointer;
    }
    
    .btn-group > .btn {
        flex: 1 1 auto;
        position: relative;
    }
    
    .btn-group > .btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover {
        z-index: 1;
        color: #fff;
        background-color: #545b62;
        border-color: #4e555b;
    }
    
    
    #main-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 2px;
        display: table;
    }
    
    td, th {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border: 1px solid #dee2e6;
        padding: .75rem;
        vertical-align: top;
        display: table-cell;
    }

    td.ICPC, th.ICPC {
        overflow: auto;
        white-space: nowrap;
        text-overflow: clip;
        border: 1px solid #dee2e6;
        padding: .75rem;
        vertical-align: top;
        display: table-cell;
    }
    
    .main-table-wrapper a {
        text-decoration: none;
        color: #007bff;
    }
    
    .difficulty-gray {
        color: rgb(128, 128, 128);
    }
    
    .difficulty-green {
        color: rgb(0, 128, 0);
    }
    
    .difficulty-cyan {
        color: rgb(3, 168, 158);
    }
    
    .difficulty-blue {
        color: rgb(0, 0, 255);
    }
    
    .difficulty-purple {
        color: rgb(170, 0, 170);
    }
    
    .difficulty-orange {
        color: rgb(255, 140, 0);
    }
    
    .difficulty-light-red {
        color: rgb(255, 99, 71);
    }
    
    .difficulty-dark-red {
        color: rgb(255, 0, 0);
    }
    
    .difficulty-black {
        color: rgb(0, 0, 0);
    }
    
    .tooltip-inner {
        max-width: 200px;
        padding: .25rem .5rem;
        color: #fff;
        text-align: center;
        background-color: #000;
        border-radius: .25rem;
        pointer-events: none;
        position: fixed;
        z-index: 1070;
        display: block;
        margin: 0;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        text-align: start;
        text-decoration: none;
        text-shadow: none;
        text-transform: none;
        letter-spacing: normal;
        word-break: normal;
        word-spacing: normal;
        white-space: normal;
        line-break: auto;
        font-size: .875rem;
        word-wrap: break-word;
    }


@media screen and (min-width: 800px) {

    /* Override the template */
    .container {
        margin: 0 auto;
        width: max(105vw, 1200px);
        max-width: 95%
    }
  
    .difficulty-circle {
        display: inline-block;
        border-radius: 50%;
        border-style: solid;
        border-width: 1px;
        margin-right: 5px;
        height: 12px;
        width: 12px;
    }

    .btn-group>.btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        margin-left: -1px;
    }
    
    .btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}



@media screen and (max-width: 799px) {

    .btn-group {
        position: relative;
        display: block;
        vertical-align: middle;
    }

    .container {
        margin: 0 auto;
        width: max(105vw, 1200px);
        max-width: 95%;
    }

    .content-wrapper {
        padding: 5px;
    }

    .difficulty-circle {
        display: inline-block;
        border-radius: 50%;
        border-style: solid;
        border-width: .1rem;
        margin-right: .5rem;
        height: .5rem;
        width: .5rem;
    }

    .btn {
        align-items: flex-start;
        text-align: center;
        cursor: default;
        color: buttontext;
        padding-top: auto;
        padding-right: 1em;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: rgb(76, 76, 76);
        border-right-color: rgb(76, 76, 76);
        border-bottom-color: rgb(76, 76, 76);
        border-left-color: rgb(76, 76, 76);
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        background-color: rgba(255, 255, 255, 0.01);
        font-size: 13px;
        font-family: Helvetica;
        box-sizing: border-box;
        margin-top: .5rem;
        color: initial;
        letter-spacing: normal;
        word-spacing: normal;
        line-height: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        display: inline-block;
        text-align: start;
        writing-mode: horizontal-tb;
        border-radius: .2rem;
    }

    #login-btn {
        margin-top: 0;
    }

    #main-table {
        display: table;
        border-collapse: separate;
        -webkit-border-horizontal-spacing: 2px;
        -webkit-border-vertical-spacing: 2px;
        border-top-color: gray;
    }

    #main-table tbody, #main-table tr {
        /* display: table-row-group; */
        vertical-align: middle;
        border-top-color: inherit;
        border-right-color: inherit;
        border-bottom-color: inherit;
        border-left-color: inherit;
    }

    td, th {
        /* display: table-cell; */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        width: 100%;
        overflow-x: hidden;
        padding-right: 0;
        padding-left: 10px;
        border-right: 0;
        border-left: 0;
        /* vertical-align: inherit; */
        text-align: left;
    }

    td {
        padding-left: 2rem;
        max-width: 90%;
    }

    html {
        display: block;
    }

    .main-table-wrapper {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
        max-width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 5px;
    }

}