.d1 { background: lightblue;}
.d2 { background: lightcoral;}
.d3 { background: pink;}
.d4 { background: yellow;}
.d5 { background: lightseagreen;}
.d6 { background: cornflowerblue;}
.d7 { background: wheat;}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    color: #555555;
}

/* ---------------------- TITLES ----------------------*/
@media (max-width: 576px) {
    h1.form-title {
        font-size: 21px !important;
        text-align: center;
    }
}

h1.form-title {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    color: #555555;
    letter-spacing: -0.6px;
    font-weight: bold;
    text-transform: uppercase;
}

@media (max-width: 576px) {
    h3.form-title {
        font-size: 17px !important;
    }
}

h3.form-title {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: #00C3CE;
    letter-spacing: -0.43px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 15px;
}


.primary-color {
    color: #00C3CE !important;
}

/* ---------------------- DATE ------------------------*/

@media (max-width: 768px) {
    .date-block {
        text-align: center !important;
        line-height: 18px;
        color: #555555;
    }

        .date-block strong {
            text-transform: uppercase;
            font-size: 13px;
        }
}

.date-block {
    text-align: right;
    color: #555555;
}


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

.gray-box {
    background: #F5F5F5;
    border: solid 1px #E3E3E3;
    margin-bottom: 15px;
    border-radius: 5px;
}

body .form-group input[type="text"],
body .form-group input[type="password"],
body .form-group input[type="email"],
body .form-group input[type="text"],
body .form-group select,
body .form-group textarea {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 3px 0 0 #E0E0E0 !important;
    border-radius: 3px;
    padding: 20px .75rem;
}



input[type="file"].form-control {
    border: none;
    box-shadow: 0 0 0 0 transparent !important;
    border-radius: 0;
    padding: 0;
    padding: 5px 0 0 0;
    border: none;
}

    input[type="file"].form-control:focus {
        border-color: transparent;
        box-shadow: 0 3px 0 0 transparent !important;
    }

.was-validated .form-control:invalid {
    border-color: #dc3545;
    box-shadow: 0 3px 0 0 #dc3545 !important;
}


.input-group-prepend {
    box-shadow: 0 3px 0 0 #E0E0E0 !important;
}


body .form-group select {
    height: 43px;
}

.form-group label {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    margin: 0 0 2px 0;
    color: #555555;
}


/* ---------------------- FORM BUTTONS -------------------------------*/
.btn.btn-primary {
    background: #00C3CE;
    border: solid 1px #00C3CE;
    padding: 11px 30px;
    text-transform: uppercase;
    position: relative;
}

    .btn.btn-primary:hover {
        background: #21CCD6;
        border: solid 1px #21CCD6;
    }

    .btn.btn-primary:not(:disabled):not(.disabled):active {
        background: #1AA6AE;
        border: solid 1px #1AA6AE;
    }



body .form-group input.form-control[type="text"]:focus,
body .form-group input.form-control[type="password"]:focus,
body .form-group input.form-control[type="email"]:focus,
body .form-group input.form-control[type="text"]:focus {
    border-color: #18C8D2;
    box-shadow: 0 3px 0 0 #18C8D2 !important;
}



.btn.btn-shadow {
    box-shadow: 0px 15px 13px -8px #969696;
}

    .btn.btn-shadow:hover {
        box-shadow: 0px 15px 13px -12px #969696;
    }

    .btn.btn-shadow:not(:disabled):not(.disabled):active {
        box-shadow: 0px 15px 13px -8px #969696;
    }

    .btn.btn-shadow:focus {
        box-shadow: 0px 15px 13px -12px #969696;
    }


.btn.fixed-w {
    width: 215px;
}

.btn {
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    padding: 10px 30px;
    font-weight: bold;
    font-size: 0.9rem;
}

    .btn:not(.btn-shadow) {
        box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
    }



.btn-info {
    background: #FFC821;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.41);
    border-radius: 5px;
    color: #383737;
    font-weight: bold;
}

    .btn-info:hover {
        background: #FFD143;
        color: #383737;
        border: 3px solid #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.41);
    }

    .btn-info:not(:disabled):not(.disabled):active {
        color: #383737;
        border: 3px solid #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.41) !important;
        background-color: #E09A2C;
    }

    .btn-info.focus, .btn-info:focus {
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.41) !important;
    }


.btn-secondary {
    background-color: #8494A2;
    border-color: #8494A2;
}

    .btn-secondary:hover {
        background-color: #A0AFBC;
        border-color: #A0AFBC;
    }

    .btn-secondary:not(:disabled):not(.disabled):active {
        background-color: #6A7A88;
        border-color: #6A7A88;
    }

/*------------- BTN SUCCESS ---------------*/

.btn-success {
    background-color: #69C262;
    border-color: #69C262;
}

    .btn-success:hover {
        background-color: #82D37C;
        border-color: #82D37C;
    }

    .btn-success:not(:disabled):not(.disabled):active {
        background-color: #63A75E;
        border-color: #63A75E;
    }

.btn-single-icon {
    padding: 3px 8px 2px 8px !important;
}

    .btn-single-icon .material-icons {
        font-size: 30px;
        margin-top: 4px;
    }

button .material-icons {
    font-size: 24px;
    margin-left: -14px;
    float: left;
    margin-right: 5px;
    margin-bottom: -5px;
    margin-top: -2px;
}

.form-title .material-icons {
    float: left;
    margin-right: 5px;
    margin-bottom: -5px;
    font-size: inherit;
    margin-left: 0;
    margin-top: 2px;
}

h3.form-title .material-icons {
    margin-top: -7px;
    font-size: 36px;
}

h4 .material-icons,
h5 .material-icons,
h6 .material-icons {
    margin-top: -7px;
    font-size: 36px;
    float: left;
    margin-right: 7px;
}

h6 .material-icons {
    font-size: 31px;
}

h1 .material-icons {
    margin-top: -4px !important;
    font-size: 39px !important;
}



.btn-next, .btn-back {
    position: relative;
}

    .btn-next .material-icons {
        font-size: 32px;
        margin-top: -5px;
        position: absolute;
        right: 4px;
    }

    .btn-back .material-icons {
        font-size: 32px;
        margin-top: -5px;
        position: absolute;
        left: 25px;
    }

.actions a {
    color: #8494A2;
    margin-left: 9px;
    display: inline-block;
    width: 28px;
    text-align: center;
}

    .actions a:hover {
        color: #18C8D2;
    }

    .actions a:first-child {
        margin-left: 0 !important;
    }


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

.imca-tabs {
    border-bottom: none;
    background: #18C8D2;
    border-radius: 3px;
}

    .imca-tabs .nav-link {
        display: block;
        padding: 16px 0 12px 0;
        margin: 0 0 0 26px;
    }

.nav-tabs.imca-tabs .nav-item {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin-bottom: 0;
    border: 0;
    border-bottom: solid 4px transparent;
    text-transform: uppercase;
    color: #fff;
}

.nav-tabs .nav-link.active {
    color: #fff;
    background-color: transparent;
    border-bottom: solid 4px #4A4A4A;
}

/* ---------------------- TABLE STYLES ----------------------------*/

.imca-table th {
    border-top: none;
    color: #555555;
}

.imca-table.table-striped thead th {
    border-bottom: none;
}

.imca-table.table-striped thead th,
.imca-table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #299ea5;
}

.imca-table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #ebf7f7;
}

.imca-table.table-striped td {
    border-top: solid 1px #b7d4d6;
}



.thin-table td, .thin-table th {
    font-size: 12px;
    padding: .55rem;
}


/* ---------------------- ALERTS -----------------------------------*/

.alert .icon {
    display: none;
}

.alert h5 {
    font-size: 16px;
    font-weight: bold;
}

.alert.alert-primary {
    background: #CCE8F6;
    border: solid 1px #7CBDE1;
    color: #417FB0;
}

    .alert.alert-primary h5 {
        color: #417FB0;
    }

.alert.alert-warning {
    background: #F8F3D5;
    border: solid 1px #D8CE81;
}

    .alert.alert-warning h5 {
        color: #856404;
    }

.alert.alert-danger {
    background: #EDC8C4;
    border: solid 1px #BE8180;
    color: #B52D28;
}

    .alert.alert-danger h5 {
        color: #B52D28;
    }


.alert.alert-success {
    background: #DEF3D5;
    border: solid 1px #AFCDA3;
    color: #597151;
}

    .alert.alert-success h5 {
        color: #597151;
    }


@media (min-width: 576px) {
    .alert {
        padding: 1.3rem 1.25rem 1.3rem 90px;
    }

        .alert .icon {
            width: 43px;
            height: 43px;
            position: absolute;
            left: 23px;
            display: block;
            background: url("../images/error-icon.svg") no-repeat 0 0;
        }

        .alert.alert-primary .icon {
            background: url("../images/info-icon.svg") no-repeat 0 0;
        }

        .alert.alert-danger .icon {
            background: url("../images/error-icon.svg") no-repeat 0 0;
        }

        .alert.alert-warning .icon {
            background: url("../images/alert-icon.svg") no-repeat 0 0;
        }

        .alert.alert-success .icon {
            background: url("../images/success-icon.svg") no-repeat center 0;
        }
}

button:focus {
    outline: none;
}

.text-alert {
    text-align: center;
}

    .text-alert .material-icons {
        font-size: 37px;
        margin-top: -7px;
        margin-right: 5px;
        float: left;
    }

.alert p, .alert .date {
    font-size: 14px;
}

.alert .date {
    margin-top: 10px;
}

.alert-dismissible .close {
    min-width: auto !important;
}


.badge {
    padding: 8px 25px;
    margin-left: 5px;
    font-weight: normal;
    border-radius: 20px;
}

table .badge {
    margin-left: 0;
}


.badge-primary {
    color: #fff;
    background-color: #18C8D2;
}


/* ------------- Form Header -------------------*/

.imca-form-header {
    text-align: center;
}

.application-status {
    text-align: center;
    margin-bottom: 15px;
}

.application-date {
    text-align: center;
    margin-bottom: 15px;
    color: #555555;
}

.application-logo .imca-logo {
    margin-bottom: 10px;
}

.application-logo h1.form-title {
    font-size: 25px;
}

@media (min-width: 768px) {

    .application-logo h1.form-title {
        padding-top: 11px;
    }

    .application-logo .imca-logo {
        border-right: 3px solid #E8E8E8;
        padding-right: 28px;
        margin-right: 25px;
        float: left;
    }


    .application-status {
        text-align: left;
    }

    .application-date {
        text-align: right;
    }

    .application-status {
        margin-bottom: 60px;
    }

    .imca-form-header {
        text-align: left;
    }
}


input.form-control.is-invalid[type="text"],
input.form-control.is-invalid[type="password"],
input.form-control.is-invalid[type="email"],
input.form-control.is-invalid[type="text"]
select.form-control.is-invalid,
textarea.form-control.is-invalid {
    border-color: #EABDBB !important;
    background: #FEF4F4 !important;
    border: 1px solid #EABDBB !important;
    box-shadow: 0 3px 0 0 #EABDBB !important;
}


body input.form-control.disabled[type="text"],
body input.form-control.disabled[type="password"],
body input.form-control.disabled[type="email"],
body input.form-control.disabled[type="text"],
body textarea.form-control.disabled,
body select.form-control.disabled {
    background-color: #E0E0E0 !important;
    border: solid 1px #E0E0E0 !important;
    box-shadow: 0 3px 0 0 #BEBEBE !important;
    cursor: default;
    color: #444;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    color: #555555;
}

/* ---------------------- TITLES ----------------------*/
@media (max-width: 576px) {
    h1.form-title {
        font-size: 21px !important;
        text-align: center;
    }
}

h1.form-title {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    color: #555555;
    letter-spacing: -0.6px;
    font-weight: bold;
    text-transform: uppercase;
}

@media (max-width: 576px) {
    h3.form-title {
        font-size: 17px !important;
    }
}

h3.form-title {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: #00C3CE;
    letter-spacing: -0.43px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 15px;
}


.primary-color {
    color: #00C3CE !important;
}

/* ---------------------- DATE ------------------------*/

@media (max-width: 768px) {
    .date-block {
        text-align: center !important;
        line-height: 18px;
        color: #555555;
    }

        .date-block strong {
            text-transform: uppercase;
            font-size: 13px;
        }
}

.date-block {
    text-align: right;
    color: #555555;
}


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

.gray-box {
    background: #F5F5F5;
    border: solid 1px #E3E3E3;
    margin-bottom: 15px;
    border-radius: 5px;
}

body .form-group input[type="text"],
body .form-group input[type="password"],
body .form-group input[type="email"],
body .form-group input[type="text"],
body .form-group select,
body .form-group textarea {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 3px 0 0 #E0E0E0 !important;
    border-radius: 3px;
    padding: 20px .75rem;
}

input[type="file"].form-control {
    border: none;
    box-shadow: 0 0 0 0 transparent !important;
    border-radius: 0;
    padding: 0;
    padding: 5px 0 0 0;
    border: none;
}

    input[type="file"].form-control:focus {
        border-color: transparent;
        box-shadow: 0 3px 0 0 transparent !important;
    }

.was-validated .form-control:invalid {
    border-color: #dc3545;
    box-shadow: 0 3px 0 0 #dc3545 !important;
}


.input-group-prepend {
    box-shadow: 0 3px 0 0 #E0E0E0 !important;
}


body .form-group select {
    height: 43px;
}

.form-group label {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    margin: 0 0 2px 0;
    color: #555555;
}


/* ---------------------- FORM BUTTONS -------------------------------*/
.btn.btn-primary {
    background: #00C3CE;
    border: solid 1px #00C3CE;
    padding: 11px 30px;
    text-transform: uppercase;
    position: relative;
}

    .btn.btn-primary:hover {
        background: #21CCD6;
        border: solid 1px #21CCD6;
    }

    .btn.btn-primary:not(:disabled):not(.disabled):active {
        background: #1AA6AE;
        border: solid 1px #1AA6AE;
    }



body .form-group input.form-control[type="text"]:focus,
body .form-group input.form-control[type="password"]:focus,
body .form-group input.form-control[type="email"]:focus,
body .form-group input.form-control[type="text"]:focus {
    border-color: #18C8D2;
    box-shadow: 0 3px 0 0 #18C8D2 !important;
}



.btn.btn-shadow {
    box-shadow: 0px 15px 13px -8px #969696;
}

    .btn.btn-shadow:hover {
        box-shadow: 0px 15px 13px -12px #969696;
    }

    .btn.btn-shadow:not(:disabled):not(.disabled):active {
        box-shadow: 0px 15px 13px -8px #969696;
    }

    .btn.btn-shadow:focus {
        box-shadow: 0px 15px 13px -12px #969696;
    }


.btn.fixed-w {
    width: 215px;
}

.btn {
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    padding: 10px 30px;
    font-weight: bold;
    font-size: 0.9rem;
}

    .btn:not(.btn-shadow) {
        box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
    }



.btn-info {
    background: #FFC821;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.41);
    border-radius: 5px;
    color: #383737;
    font-weight: bold;
}

    .btn-info:hover {
        background: #FFD143;
        color: #383737;
        border: 3px solid #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.41);
    }

    .btn-info:not(:disabled):not(.disabled):active {
        color: #383737;
        border: 3px solid #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.41) !important;
        background-color: #E09A2C;
    }

    .btn-info.focus, .btn-info:focus {
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.41) !important;
    }


.btn-secondary {
    background-color: #8494A2;
    border-color: #8494A2;
}

    .btn-secondary:hover {
        background-color: #A0AFBC;
        border-color: #A0AFBC;
    }

    .btn-secondary:not(:disabled):not(.disabled):active {
        background-color: #6A7A88;
        border-color: #6A7A88;
    }

/*------------- BTN SUCCESS ---------------*/

.btn-success {
    background-color: #69C262;
    border-color: #69C262;
}

    .btn-success:hover {
        background-color: #82D37C;
        border-color: #82D37C;
    }

    .btn-success:not(:disabled):not(.disabled):active {
        background-color: #63A75E;
        border-color: #63A75E;
    }

.btn-single-icon {
    padding: 3px 8px 2px 8px !important;
}

    .btn-single-icon .material-icons {
        font-size: 30px;
        margin-top: 4px;
    }

button .material-icons {
    font-size: 24px;
    margin-left: -14px;
    float: left;
    margin-right: 5px;
    margin-bottom: -5px;
    margin-top: -2px;
}

.form-title .material-icons {
    float: left;
    margin-right: 5px;
    margin-bottom: -5px;
    font-size: inherit;
    margin-left: 0;
    margin-top: 2px;
}

h3.form-title .material-icons {
    margin-top: -7px;
    font-size: 36px;
}

h4 .material-icons,
h5 .material-icons,
h6 .material-icons {
    margin-top: -7px;
    font-size: 36px;
    float: left;
    margin-right: 7px;
}

h6 .material-icons {
    font-size: 31px;
}

h1 .material-icons {
    margin-top: -4px !important;
    font-size: 39px !important;
}



.btn-next, .btn-back {
    position: relative;
}

    .btn-next .material-icons {
        font-size: 32px;
        margin-top: -5px;
        position: absolute;
        right: 4px;
    }

    .btn-back .material-icons {
        font-size: 32px;
        margin-top: -5px;
        position: absolute;
        left: 25px;
    }

.actions a {
    color: #8494A2;
    margin-left: 9px;
    display: inline-block;
    width: 28px;
    text-align: center;
}

    .actions a:hover {
        color: #18C8D2;
    }

    .actions a:first-child {
        margin-left: 0 !important;
    }


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

.imca-tabs {
    border-bottom: none;
    background: #18C8D2;
    border-radius: 3px;
}

    .imca-tabs .nav-link {
        display: block;
        padding: 16px 0 12px 0;
        margin: 0 0 0 26px;
    }

.nav-tabs.imca-tabs .nav-item {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin-bottom: 0;
    border: 0;
    border-bottom: solid 4px transparent;
    text-transform: uppercase;
    color: #fff;
}

.nav-tabs .nav-link.active {
    color: #fff;
    background-color: transparent;
    border-bottom: solid 4px #4A4A4A;
}

/* ---------------------- TABLE STYLES ----------------------------*/

.imca-table th {
    border-top: none;
    color: #555555;
}

.imca-table.table-striped thead th {
    border-bottom: none;
}

.imca-table.table-striped thead th,
.imca-table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #299ea5;
}

.imca-table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #ebf7f7;
}

.imca-table.table-striped td {
    border-top: solid 1px #b7d4d6;
}



.thin-table td, .thin-table th {
    font-size: 12px;
    padding: .55rem;
}


/* ---------------------- ALERTS -----------------------------------*/

.alert .icon {
    display: none;
}

.alert h5 {
    font-size: 16px;
    font-weight: bold;
}

.alert.alert-primary {
    background: #CCE8F6;
    border: solid 1px #7CBDE1;
    color: #417FB0;
}

    .alert.alert-primary h5 {
        color: #417FB0;
    }

.alert.alert-warning {
    background: #F8F3D5;
    border: solid 1px #D8CE81;
}

    .alert.alert-warning h5 {
        color: #856404;
    }

.alert.alert-danger {
    background: #EDC8C4;
    border: solid 1px #BE8180;
    color: #B52D28;
}

    .alert.alert-danger h5 {
        color: #B52D28;
    }


.alert.alert-success {
    background: #DEF3D5;
    border: solid 1px #AFCDA3;
    color: #597151;
}

    .alert.alert-success h5 {
        color: #597151;
    }


@media (min-width: 576px) {
    .alert {
        padding: 1.3rem 1.25rem 1.3rem 90px;
    }

        .alert .icon {
            width: 43px;
            height: 43px;
            position: absolute;
            left: 23px;
            display: block;
            background: url("../images/error-icon.svg") no-repeat 0 0;
        }

        .alert.alert-primary .icon {
            background: url("../images/info-icon.svg") no-repeat 0 0;
        }

        .alert.alert-danger .icon {
            background: url("../images/error-icon.svg") no-repeat 0 0;
        }

        .alert.alert-warning .icon {
            background: url("../images/alert-icon.svg") no-repeat 0 0;
        }

        .alert.alert-success .icon {
            background: url("../images/success-icon.svg") no-repeat center 0;
        }
}

button:focus {
    outline: none;
}

.text-alert {
    text-align: center;
}

    .text-alert .material-icons {
        font-size: 37px;
        margin-top: -7px;
        margin-right: 5px;
        float: left;
    }

.alert p, .alert .date {
    font-size: 14px;
}

.alert .date {
    margin-top: 10px;
}

.alert-dismissible .close {
    min-width: auto !important;
}


.badge {
    padding: 8px 25px;
    margin-left: 5px;
    font-weight: normal;
    border-radius: 20px;
}

table .badge {
    margin-left: 0;
}


.badge-primary {
    color: #fff;
    background-color: #18C8D2;
}


/* ------------- Form Header -------------------*/

.imca-form-header {
    text-align: center;
}

.application-status {
    text-align: center;
    margin-bottom: 15px;
}

.application-date {
    text-align: center;
    margin-bottom: 15px;
    color: #555555;
}

.application-logo .imca-logo {
    margin-bottom: 10px;
}

.application-logo h1.form-title {
    font-size: 25px;
}

@media (min-width: 768px) {

    .application-logo h1.form-title {
        padding-top: 11px;
    }

    .application-logo .imca-logo {
        border-right: 3px solid #E8E8E8;
        padding-right: 28px;
        margin-right: 25px;
        float: left;
    }


    .application-status {
        text-align: left;
    }

    .application-date {
        text-align: right;
    }

    .application-status {
        margin-bottom: 60px;
    }

    .imca-form-header {
        text-align: left;
    }
}


input.form-control.is-invalid[type="text"],
input.form-control.is-invalid[type="password"],
input.form-control.is-invalid[type="email"],
input.form-control.is-invalid[type="text"]
select.form-control.is-invalid,
textarea.form-control.is-invalid {
    border-color: #EABDBB !important;
    background: #FEF4F4 !important;
    border: 1px solid #EABDBB !important;
    box-shadow: 0 3px 0 0 #EABDBB !important;
}


body input.form-control.disabled[type="text"],
body input.form-control.disabled[type="password"],
body input.form-control.disabled[type="email"],
body input.form-control.disabled[type="text"],
body textarea.form-control.disabled,
body select.form-control.disabled {
    background-color: #E0E0E0 !important;
    border: solid 1px #E0E0E0 !important;
    box-shadow: 0 3px 0 0 #BEBEBE !important;
    cursor: default;
    color: #444
}

.form-group label {
    display: block;
}

#formCheckbox .form-group label {
    display: inline;
    float: none;
}


.mandatory-text {
    font-weight: normal;
    font-size: 12px;
    float: right;
    margin-bottom: -25px;
    padding-top: 3px;
    color: #828282;
}


/*---------------------- Custom Styles to deal with Sharepoint --------------------------- */

@media (max-width: 768px) {
    #suiteBarDelta,
    #s4-ribbonrow,
    #s4-titlerow,
    #titleAreaBox,
    #s4-titlerow,
    #s4-titlerow {
        display: none !important;
    }

    .space-top {
        margin-top: 10px;
    }
}

@media (min-width: 768px) {
    .space-top {
        margin-top: 27px !important;
    }
}


#contentBox {
    margin-right: 20px;
    margin-left: 220px;
    min-width: 100%;
}

#contentBox {
    margin-left: 0;
    padding-bottom: 50px;
}

#s4-titlerow {
    display: none !important;
}


#s4-workspace {
    -webkit-overflow-scrolling: touch;
}

#formCheckbox .col-md-4 {
    margin-bottom: 10px;
}


/* ------------------------- DOcument Box ----------------------------- */
.document-box {
    background: #ECF5F7;
    border-radius: 10px;
    border: 1px #BCD5DB solid;
    padding: 20px;
}


.btn.btn-square {
    padding: 11px 15px;
}

    .btn.btn-square .material-icons {
        margin-left: 0;
        float: left;
        margin-right: 0;
        margin-bottom: 0;
        margin-top: 0;
    }

.no-documents {
    background: #E4EBED;
    padding: 10px 15px;
    border-radius: 5px;
    border: dashed 1px #BCD5DB;
    color: #387583;
    text-align: center;
    margin-bottom: 5px;
}

.loaded-document {
    background: #fff;
    padding: 7px 11px;
    border-radius: 5px;
    border: solid 1px #BCD5DB;
    color: #387583;
    margin-bottom: 5px;
}

    .loaded-document a {
        text-decoration: none;
        color: #0FA4C1;
        font-size: 13px;
    }

        .loaded-document a:hover {
            opacity: 0.5;
        }

        .loaded-document a .material-icons {
            float: left;
            margin-right: 5px;
        }

.remove-action {
    width: 24px;
    height: 33px;
    float: right;
    text-align: center;
    padding-top: 0;
    color: #E55656;
}

    .remove-action:hover {
        opacity: 0.5;
        cursor: pointer;
    }

/* ------------------------- Modal Box ----------------------------- */

h5.modal-title {
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    color: #00C3CE;
    margin: 0px;
}

.modal-footer {
    border-top: none;
}

.modal-header {
    padding: 1rem 25px;
}

.modal-body {
    padding: 15px 25px;
}

.modal-content {
    border: none;
}


.form-group label {
    display: block;
}

#formCheckbox .form-group label {
    display: inline;
    float: none;
}


.mandatory-text {
    font-weight: normal;
    font-size: 12px;
    float: right;
    margin-bottom: -25px;
    padding-top: 3px;
    color: #828282;
}


/*---------------------- Custom Styles to deal with Sharepoint --------------------------- */

@media (max-width: 768px) {
    #suiteBarDelta,
    #s4-ribbonrow,
    #s4-titlerow,
    #titleAreaBox,
    #s4-titlerow,
    #s4-titlerow {
        display: none !important;
    }

    .space-top {
        margin-top: 10px;
    }
}

@media (min-width: 768px) {
    .space-top {
        margin-top: 27px !important;
    }
}


#contentBox {
    margin-right: 20px;
    margin-left: 220px;
    min-width: 100%;
}

#contentBox {
    margin-left: 0;
    padding-bottom: 50px;
}

#s4-titlerow {
    display: none !important;
}


#s4-workspace {
    -webkit-overflow-scrolling: touch;
}

#formCheckbox .col-md-4 {
    margin-bottom: 10px;
}


/* ------------------------- DOcument Box ----------------------------- */
.document-box {
    background: #ECF5F7;
    border-radius: 10px;
    border: 1px #BCD5DB solid;
    padding: 20px;
}

.btn.btn-square {
    padding: 11px 15px;
}

    .btn.btn-square .material-icons {
        margin-left: 0;
        float: left;
        margin-right: 0;
        margin-bottom: 0;
        margin-top: 0;
    }

.no-documents {
    background: #E4EBED;
    padding: 10px 15px;
    border-radius: 5px;
    border: dashed 1px #BCD5DB;
    color: #387583;
    text-align: center;
    margin-bottom: 5px;
}

.loaded-document {
    background: #fff;
    padding: 7px 11px;
    border-radius: 5px;
    border: solid 1px #BCD5DB;
    color: #387583;
    margin-bottom: 5px;
}

    .loaded-document a {
        text-decoration: none;
        color: #0FA4C1;
        font-size: 13px;
    }

        .loaded-document a:hover {
            opacity: 0.5;
        }

        .loaded-document a .material-icons {
            float: left;
            margin-right: 5px;
        }

.remove-action {
    width: 24px;
    height: 33px;
    float: right;
    text-align: center;
    padding-top: 0;
    color: #E55656;
}

    .remove-action:hover {
        opacity: 0.5;
        cursor: pointer;
    }

/* ------------------------- Modal Box ----------------------------- */

h5.modal-title {
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    color: #00C3CE;
    margin: 0px;
}

.modal-footer {
    border-top: none;
}

.modal-header {
    padding: 1rem 25px;
}

.modal-body {
    padding: 15px 25px;
}

.modal-content {
    border: none;
}

@media (min-width: 900px) {

    .modal-lg-custom {
        max-width: 60%;
    }
}

.summary-result {
    width: 100%;
    font-size: 13px;
}

    .summary-result td {
        border-bottom: solid 1px #E9E9E9;
        padding: 7px 0;
    }

        .summary-result td:nth-child(even) {
            font-weight: bold;
            text-align: right;
        }


.bg-light.border-solid {
    border: solid 1px #d9dadc;
}

.heavy-truck-icon {
    background: url(../images/heavy-truck.svg) no-repeat left 0;
    padding: 7px;
    padding-left: 65px;
}

.scroll-content {
    max-height: 350px;
    overflow-y: scroll;
}

@media (min-width: 763px) {
    .less-top {
        margin-top: -55px;
    }
}

.datePicker {
    position: relative;
}

    .datePicker span.icon-inside-input {
        position: absolute;
        right: 0;
        margin: 11px 0px 0 0;
    }

    .datePicker i.material-icons {
        font-size: 30px;
        margin-top: -3px;
        margin-left: 7px;
        margin-right: 7px;
    }


/*LANDING FORM*/


.section-icon {
    width: 217px;
    display: block;
    border: solid 6px #EBEBEB;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    background-color: white;
    margin: 0 13px 26px 13px;
    line-height: 16px;
    color: #2E2E2E;
    position: relative;
}

    .section-icon:hover {
        color: #2E2E2E;
        text-decoration: none;
    }



    .section-icon p {
        font-size: 12px;
    }

    .section-icon .icon {
        height: 132px;
        padding-top: 10px;
    }

.link-description h6 {
    margin: 0;
    padding: 0 10px;
    font-weight: bold;
    padding-bottom: 5px;
    color: #00c2cb;
}

.link-description p {
    margin: 0;
    padding: 0 10px;
    padding-bottom: 15px;
}

.link-description {
    position: relative;
    min-height: 62px;
    bottom: 0;
}


.flex-same-height {
    text-align: center;
}

@media (min-width: 768px) {
    .flex-same-height {
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        flex-wrap: wrap;
    }
}


/*

.section-icon h6{
    display: block;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    height: 44px;
}


.flex-same-height {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
}






*/

.section-icon {
    transition: all 0.2s ease;
    transform: scale(1);
}

    .section-icon .icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section-icon:hover {
        transition: all 0.2s ease;
        transform: scale(1.08);
    }

/*fin*/




#peoplepicker .sp-peoplepicker-topLevel, .sp-peoplepicker-topLevelDisabled {
    cursor: text;
    height: 100%;
    width: 371px;
    position: relative;
    padding: 6px 30px 10px 20px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 3px 0 0 #E0E0E0 !important;
    border-radius: 3px;
    margin-top: -14px;
    margin-left: 0;
}

#peoplepicker .sp-peoplepicker-initialHelpText {
    top: 8px;
    left: 16px;
    position: absolute;
}

#peoplePicker_multiPeoplePicker_TopSpan,
#peoplePicker_gerente-nombre_TopSpan {
    cursor: text;
    height: 100%;
    width: 371px;
    position: relative;
    padding: 6px 30px 10px 20px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 3px 0 0 #E0E0E0 !important;
    border-radius: 3px;
    margin-top: -14px;
    margin-left: 0;
}

#peoplePicker_multiPeoplePicker_TopSpan,
#peoplePicker_gerente-nombre_TopSpan {
    width: 100% !important;
}

    #peoplePicker_multiPeoplePicker_TopSpan input,
    #peoplePicker_gerente-nombre_TopSpan input {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

.sp-peoplepicker-initialHelpText {
    top: 8px;
    left: 16px;
    position: absolute;
}

.ui-people-userlink {
    display: inline-block;
    margin-right: 10px;
}

    .ui-people-userlink:after {
        content: ", ";
    }

    .ui-people-userlink:last-child:after {
        content: "";
    }


#peoplePicker_multiPeoplePicker_TopSpan,
#peoplePicker_colaboradores-impactados_TopSpan {
    cursor: text;
    height: 100%;
    width: 371px;
    position: relative;
    padding: 6px 30px 10px 20px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 3px 0 0 #E0E0E0 !important;
    border-radius: 3px;
    margin-top: -14px;
    margin-left: 0;
}

#peoplePicker_multiPeoplePicker_TopSpan,
#peoplePicker_colaboradores-impactados_TopSpan {
    width: 100% !important;
}

    #peoplePicker_multiPeoplePicker_TopSpan input,
    #peoplePicker_colaboradores-impactados_TopSpan input {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }


    /*Copia por ahora0*/

#peoplePicker_multiPeoplePicker_TopSpan,
#peoplePicker_analistas-asignados_TopSpan {
    cursor: text;
    height: 100%;
    width: 371px;
    position: relative;
    padding: 6px 30px 10px 20px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 3px 0 0 #E0E0E0 !important;
    border-radius: 3px;
    margin-top: -14px;
    margin-left: 0;
}

#peoplePicker_multiPeoplePicker_TopSpan,
#peoplePicker_analistas-asignados_TopSpan {
    width: 100% !important;
}

    #peoplePicker_multiPeoplePicker_TopSpan input,
    #peoplePicker_analistas-asignados_TopSpan input {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }



#peoplePicker_multiPeoplePicker_TopSpan,
#peoplePicker_observadores_TopSpan {
    cursor: text;
    height: 100%;
    width: 371px;
    position: relative;
    padding: 6px 30px 10px 20px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 3px 0 0 #E0E0E0 !important;
    border-radius: 3px;
    margin-top: -14px;
    margin-left: 0;
}

#peoplePicker_multiPeoplePicker_TopSpan,
#peoplePicker_observadores_TopSpan {
    width: 100% !important;
}

    #peoplePicker_multiPeoplePicker_TopSpan input,
    #peoplePicker_observadores_TopSpan input {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }



.documents-edit-modal .nav-pills .nav-link.active{
    color: #fff;
    background-color: transparent;
    border-bottom: solid 4px #000;
    border-radius: 0;
}

.documents-edit-modal .nav-item a {
    color: #fff;
}


.reference-list {
    padding:0;
}
.reference-item {
    background: #18C8D2;
    color: #fff;
    border-radius: 15px;
    padding: 3px;
    margin-bottom: 3px;
}

.reference-item span {
    padding: 4px 0 0 15px;
}

.reference-item .material-icons {
    position: absolute;
    right: 18px;
}

.chat-box-white {
    border:solid 1px #DEE2E6;
    border-radius: 10px;
    overflow: hidden;
}