#numberCircle {
    border-radius: 50%;
    width: 26px;
    height: 26px;
    padding: 2px;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    font: 18px Arial, sans-serif;
    margin-top: 8px;
    margin-left: 23.5%;
    padding-left: 2px;
}

#datatable-ajax TD {
    font-size: 12px;
    color: #000000;
}

#datatable-ajax TH {
    font-size: 12px;
    color: #000000;
}

.panel-heading {
    background-color: #00AFEF;
    border: solid 1px #9A9A9A;
}

body .btn-primary {
    background-color: #00AFEF;
    border-color: #00AFEF;
}

.panel-title {
    color: white;
}

.panel-subtitle {
    color: white;
}

.panel-actions a {
    color: white;
}

.panel-outline {
    border-right: solid 1px #9a9a9a;
    border-left: solid 1px #9a9a9a;
    border-bottom: solid 1px #9a9a9a;
}

#datatable-details td {
    color: #3A3A3A;
}

.mainelements {
    border: none !important;
    background: none;
}

.headerelements {
    font-weight: bold;
}

@media (min-width: 767px) {
    .rowelements {
        margin-left: 25%;
    }

    .typeres {
        margin-left: 25%;
    }


    #hopn {
        font-weight: 600;
        font-size: 18px;
        color: #e61f19;
    }

    #timp {
        font-weight: 600;
        margin-left: -110px;
        font-size: 18px;
        margin-top: -5px;
        color: #e61f19;
    }
}

@media (max-width: 767px) {
    .typeres {
        margin-left: 0px;
    }

    #typereg,
    #offaginfo,
    #projdepdetails,
    #newinstall,
    #remrep,
    #newprojinstall,
    #projreport,
    #projreportonly {
        display: flex;
    }

    div .btn-group {
        width: 550px;
    }

    .logo-responsive {
        margin-left: 22% !important;
        margin-top: 15px;
    }

    body .btn-default {
        width: 25% !important;
    }

    body .btn-primary {
        width: 25% !important;
    }

    #prfid {
        margin-left: 19% !important;
    }

    #prftext {
        width: 60% !important;
        margin-left: 18% !important;
        text-align: center;
        font-weight: 400;
    }

    #hopn {
        font-weight: 600;
        font-size: 18px;
        color: #e61f19;
        text-align: center;
    }

    #timp {
        font-weight: 600;
        font-size: 18px;
        margin-top: -5px;
        color: #e61f19;
        text-align: center;
    }

    #numberCircle {
        border-radius: 50%;
        width: 26px;
        height: 26px;
        padding: 2px;
        background: #fff;
        border: 2px solid #666;
        color: #666;
        text-align: center;
        font: 18px Arial, sans-serif;
        margin-top: 8px;
        margin-left: 3%;
        padding-left: 2px;
    }
}

#agency_id {
    display: none;
}

.loader {
    display: none;
    border: 10px solid #f3f3f3;
    position: absolute;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    border-width: 10px;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.select2-offscreen,
.select2-offscreen:focus {
    position: unset !important;
    width: unset !important;
}

#numberCircle {
    border-radius: 50%;
    width: 26px;
    height: 26px;
    padding: 2px;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    font: 18px Arial, sans-serif;
    margin-top: 8px;
    margin-left: 23.5%;
    padding-left: 2px;
}

#datatable-ajax TD {
    font-size: 12px;
    color: #000000;
}

#datatable-ajax TH {
    font-size: 12px;
    color: #000000;
}

.panel-heading {
    background-color: #00AFEF;
    border: solid 1px #9A9A9A;
}

body .btn-primary {
    background-color: #00AFEF;
    border-color: #00AFEF;
}

.panel-title {
    color: white;
}

.panel-subtitle {
    color: white;
}

.panel-actions a {
    color: white;
}

.panel-outline {
    border-right: solid 1px #9a9a9a;
    border-left: solid 1px #9a9a9a;
    border-bottom: solid 1px #9a9a9a;
}

#datatable-details td {
    color: #3A3A3A;
}

.mainelements {
    border: none !important;
    background: none;
}

.headerelements {
    font-weight: bold;
}

@media (min-width: 767px) {
    .rowelements {
        margin-left: 25%;
    }

    .typeres {
        margin-left: 25%;
    }


    #hopn {
        font-weight: 600;
        font-size: 18px;
        color: #e61f19;
    }

    #timp {
        font-weight: 600;
        margin-left: -110px;
        font-size: 18px;
        margin-top: -5px;
        color: #e61f19;
    }
}

@media (max-width: 767px) {
    .typeres {
        margin-left: 0px;
    }

    #typereg,
    #offaginfo,
    #projdepdetails,
    #newinstall,
    #remrep,
    #newprojinstall,
    #projreport,
    #projreportonly {
        display: flex;
    }

    div .btn-group {
        width: 550px;
    }

    .logo-responsive {
        margin-left: 22% !important;
        margin-top: 15px;
    }

    body .btn-default {
        width: 25% !important;
    }

    body .btn-primary {
        width: 25% !important;
    }

    #prfid {
        margin-left: 19% !important;
    }

    #prftext {
        width: 60% !important;
        margin-left: 18% !important;
        text-align: center;
        font-weight: 400;
    }

    #hopn {
        font-weight: 600;
        font-size: 18px;
        color: #e61f19;
        text-align: center;
    }

    #timp {
        font-weight: 600;
        font-size: 18px;
        margin-top: -5px;
        color: #e61f19;
        text-align: center;
    }

    #numberCircle {
        border-radius: 50%;
        width: 26px;
        height: 26px;
        padding: 2px;
        background: #fff;
        border: 2px solid #666;
        color: #666;
        text-align: center;
        font: 18px Arial, sans-serif;
        margin-top: 8px;
        margin-left: 3%;
        padding-left: 2px;
    }
}

#agency_id {
    display: none;
}

.loader {
    display: none;
    border: 10px solid #f3f3f3;
    position: absolute;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    border-width: 10px;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.select2-offscreen,
.select2-offscreen:focus {
    position: unset !important;
    width: unset !important;
}


/**********Select box triangle*********/
/* select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 8px 30px 8px 10px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: white !important;
    background-image: linear-gradient(45deg, transparent 50%, #00AFEF 50%), linear-gradient(-45deg, transparent 50%, #00AFEF 50%) !important;
    background-position: right 10px top 50%, right 5px top 50% !important;
    background-size: 6px 6px;
    background-repeat: no-repeat;
} */